@charset utf-8;

/* 隐性元素 */
::-webkit-datetime-edit-year-field {
  color: #38f;
}

::-webkit-datetime-edit-month-field {
  color: #26d2ff;
}

::-webkit-datetime-edit-day-field {
  color: #04be02;
}

::-webkit-inner-spin-button {
  visibility: hidden;
}

::-webkit-calendar-picker-indicator {
  background-color: #eee;
  background-image: 0;
  border: 1px solid rgba(125, 125, 125, 0.25);
  border-radius: 0.25rem;
  box-shadow:
    inset 0 1px #fff,
    0 1px #eee;
  color: #666;
}

/* 滚动条凹槽的颜色，还可以设置边框属性 */
/* 隐性元素 */

/* 滚动条凹槽的颜色，还可以设置边框属性 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

@media (min-width: 576px) {
  ::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
  }

  /* 滚动条的宽度 */
  ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  /* 滚动条的设置 */
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    min-height: 1rem;
    border-radius: 0.5rem;
  }
}

/* ===  全局变量  === */
/*
 * 使用说明
 * _ 代表自身
 * -x 代表线框
 * -伪类名 表示对伪类控制, 例如: table-hover
 * -数字 表示样式1,样式2
*/
:root {
  /* === 颜色变量 === */
  /* 基本色 */
  --color_red: #ff0036;
  --color_orange: #fca216;
  --color_yellow: #fcca16;
  --color_green: #09bb07;
  --color_cyan: #26d2ff;
  --color_blue: #38f;
  --color_purple: #7f39e8;

  --color_black: #373737;
  --color_white: #fff;
  --color_grey: #6a737d;
  --color_light: #f9f9f9;
  --color_dark: #666;

  /* 主题色 */
  --color_error: #ff0036;
  --color_error_b: #d10000;
  --color_error_h: #ff3237;
  --color_warning: #fca216;
  --color_warning_b: #ff8200;
  --color_warning_h: #fca248;
  --color_success: #09bb07;
  --color_success_b: #2f9833;
  --color_success_h: #3bbb39;
  --color_info: #26d2ff;
  --color_info_b: #15baf8;
  --color_info_h: #58e6ff;
  --color_primary: #38f;
  --color_primary_b: #317ef3;
  --color_primary_h: #51a6ff;
  --color_default: #666;
  --color_default_b: #444;
  --color_default_h: #999;

  /* 场景色 */
  --color_base: #373737;
  --color_title: #000;
  --color_subtitle: #373737;
  --color_describe: #666;
  --color_paragraph: #666;
  --color_tip: #6a737d;
  --color_border: #dfe2e5;
  --color_mask: rgba(0, 0, 0, 0.4);
  --color_shadow: rgba(7, 17, 27, 0.1);

  --bg_black: #24292e;
  --bg_grey: #efeff4;
  --bg_white: #fdfdfd;

  /* === 其他 === */
  /* 透明度 */
  --opacity_disabled: 0.7;

  /* 渐变 */
  --line_red: linear-gradient(135deg, #ff5a6a 0%, #f12f04 100%);
  --line_yellow: linear-gradient(
    135deg,
    rgb(252, 207, 49) 10%,
    rgb(245, 85, 85) 100%
  );
  --line_green: linear-gradient(
    135deg,
    rgb(255, 247, 32) 10%,
    rgb(60, 213, 0) 100%
  );
  --line_blue: linear-gradient(
    135deg,
    rgb(94, 252, 232) 10%,
    rgb(115, 110, 254) 100%
  );
  --line_purple: linear-gradient(135deg, #ee9ae5 10%, #5961f9 100%);

  --line_red-1: linear-gradient(135deg, #fffddc 0%, #ff4c4c 20%, #fa2aa4 100%);
  --line_red-2: linear-gradient(135deg, #ffe7dc 0%, #ff7a4c 20%, #fa2a7d 100%);
  --line_yellow-1: linear-gradient(
    135deg,
    #ffe4dc 0%,
    #faa02a 20%,
    #ff4c5d 100%
  );
  --line_yellow-2: linear-gradient(
    135deg,
    #fffadc 0%,
    #faf32a 20%,
    #ff7f4c 100%
  );
  --line_green-1: linear-gradient(
    135deg,
    #dcf9ff 0%,
    #e8ff4c 20%,
    #2afac2 100%
  );
  --line_green-2: linear-gradient(
    135deg,
    #fff7dc 0%,
    #4cff6e 20%,
    #46c4fe 100%
  );
  --line_blue-1: linear-gradient(135deg, #dcfff9 0%, #2afadf 20%, #4c83ff 100%);
  --line_blue-2: linear-gradient(135deg, #dcffe0 0%, #2accfa 20%, #b14cff 100%);
  --line_purple-1: linear-gradient(
    135deg,
    #ffe8dc 0%,
    #ff4cb5 20%,
    #cc2afa 100%
  );
  --line_purple-2: linear-gradient(
    135deg,
    #ffe8dc 0%,
    #ec4cff 20%,
    #652afa 100%
  );

  /* === 字体样式 === */
  --font_family_number: 'Helvetica Neue', helvetica;
  --font_family_text: arial, sans-serif;

  /* === 尺寸 === */
  /* 常用大小 */
  --font_mini: 0.75rem;
  --font_small: 0.875rem;
  --font_base: 1rem;
  --font_big: 1.25rem;
  --font_larger: 1.5rem;
  --font_huge: 1.75rem;

  /* 场景大小 */
  --font_title: 1.25rem;
  --font_subtitle: 1rem;
  --font_describe: 1rem;
  --font_paragraph: 1rem;
  --font_tip: 0.75rem;

  /* 图片尺寸 */
  --img_size_mini: 1.5rem;
  --img_size_small: 2rem;
  --img_size_base: 3rem;
  --img_size_big: 4.5rem;
  --img_size_larger: 6rem;
  --img_size_huge: 8rem;

  /* 圆角 */
  --radius_small: 0.25rem;
  --radius_base: 0.5rem;
  --radius_big: 1rem;
  --radius_circle: 50%;

  /* 高度 */
  --height_mini: 1rem;
  --height_small: 1.5rem;
  /*--height_base: 2rem;*/
  --height_big: 2.5rem;
  --height_larger: 3rem;

  /* === 间隔 === */
  /* 水平间距 */
  --row_mini: 0.25rem;
  --row_small: 0.5rem;
  --row_base: 1rem;
  --row_big: 1.25rem;
  --row_larger: 1.5rem;

  /* 垂直间距 */
  --col_mini: 0.25rem;
  --col_small: 0.5rem;
  --col_base: 1rem;
  --col_big: 1.25rem;
  --col_larger: 1.5rem;

  /* 填充 */
  --padding_mini: 0.5rem;
  --padding_small: 0.75rem;
  --padding_base: 1rem;
  --padding_big: 1.25rem;
  --padding_larger: 1.5rem;
  --padding_huge: 2rem;

  /* 边距 */
  --margin_mini: 0.25rem;
  --margin_small: 0.5rem;
  --margin_base: 1rem;
  --margin_big: 1.25rem;
  --margin_larger: 1.5rem;
  --margin_huge: 2rem;
}

:focus {
  outline: 0 auto 0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

/* ===  基础样式  === */
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  /*src: url(../font/HelveticaNeue.eot) format(embedded-opentype), url(../font/HelveticaNeue.woff2) format(woff2), url(../font/HelveticaNeue.woff) format(woff), url(../font/HelveticaNeue.ttf) format(truetype), url(../font/HelveticaNeue.svg) format(svg);*/
}

* {
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  line-height: 1.5;
}

body {
  color: var(--color_base);
  line-height: 1.5;
  overflow: hidden;
}

/** 不可见元素 **/
[type='search'] {
  -webkit-appearance: none;
  outline-offset: -2px;
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

[hidden],
.hidden {
  display: none !important;
}

[tabindex='-1']:focus:not(:focus-visible) {
  outline: 0 !important;
}

/* ===  布局标签  === */
article {
  overflow: hidden;
}

article > header {
  text-align: center;
}

blockquote {
  margin: 0 0 var(--margin_base);
  padding: 0 var(--padding_base);
  color: var(--color_grey);
  border-left: 3px solid var(--color_border);
}

address {
  font-style: normal;
  line-height: inherit;
}

section {
  position: relative;
}

main {
  position: relative;
}

div {
  /* text-overflow: ellipsis; */
  white-space: normal;
}

address,
article,
aside,
code,
figcaption,
hgroup,
main,
nav,
section,
iframe,
frame,
form,
pre {
  display: block;
}

header::before,
header::after,
footer::before,
footer::after,
frame::before,
frame::after,
iframe::before,
iframe::after,
code::before,
code::after,
address::before,
address::after,
section::before,
section::after {
  clear: both;
  content: '';
  display: block;
}

article::before,
article::after {
  content: '';
  display: block;
  clear: both;
}

form::before,
form::after {
  content: '';
  display: block;
  clear: both;
}

code {
  padding: var(--padding_small);
}

table {
  border-collapse: collapse;
  width: 100%;
}

nav {
  white-space: nowrap;
}

/* ===  表单类  === */
input,
input::after,
input::before {
  box-sizing: border-box;
}

input,
textarea {
  outline: none;
}

input[type='color'] {
  height: 1.5rem;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_small);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

input[type='range'] {
  margin-top: 0.75rem;
  margin-bottom: 0.875rem;
  /*上部分的填充值*/
  outline: none;
  -webkit-appearance: none;
  background: var(--color_border);
  /*背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯*/
  /* background-size: 33% 100%; */
  /*设置左右宽度比例*/
  height: 3px;
  /*横条的高度，细的真的比较好看嗯*/
}

input[type='range']:-webkit-slider-thumb,
input[type='range']:-moz-range-thumb,
input[type='range']:-ms-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color_info);
  cursor: pointer;
  margin-top: -0.875rem;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='url'],
input[type='date'],
input[type='datetime'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'] {
  /*line-height: calc(var(--height_base) - 2px);*/
  border-radius: var(--radius_small);
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='url'] {
  padding-right: var(--padding_small);
}

input[type='date'],
input[type='datetime'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'] {
  -webkit-appearance: listbox;
  padding-right: var(--padding_mini);
}

input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box;
  padding: 0;
}

input[type='datetime-local'] {
  background: #fff;
  letter-spacing: -1px;
}

/* 非法选择器 */
input:invalid {
  border-color: var(--color_error);
}

button,
select {
  text-transform: none;
  cursor: pointer;
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  border-radius: var(--radius_small);
}

button {
  -webkit-appearance: button;
  display: inline-block;
}

[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:focus {
  outline: none;
}

select {
  padding-left: var(--padding_small);
  min-width: 3rem;
  word-wrap: normal;
  text-align: center;
}

select[multiple] {
  background: none;
}

textarea {
  overflow-x: hidden;
  overflow-y: auto;
  resize: vertical;
  min-height: 10rem;
  padding: var(--padding_small);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_small);
  font: 400 13.3333px;
  min-width: 13.25rem;
}

form textarea {
  width: 100%;
}

.pc .multiple,
.pc select[multiple],
.pc select[size] {
  height: auto;
}

form label ~ label {
  margin-left: var(--margin_base);
}

optgroup {
  line-height: inherit;
}

fieldset {
  border: 0;
  min-width: 0;
}

input:focus,
select:focus,
button:focus {
  z-index: 20;
}

caption {
  caption-side: bottom;
  padding-bottom: var(--padding_small);
  padding-top: var(--padding_small);
  text-align: left;
}

/* ===  列表类  === */
dt {
  display: block;
  clear: left;
  float: left;
  font-weight: 400;
  padding: var(--padding_small);
  min-width: 7rem;
  position: relative;
}

dd {
  display: block;
  padding: var(--padding_mini);
  float: left;
}

li {
  position: relative;
}

ul {
  display: block;
  padding-left: 1.25rem;
}

dl,
dd {
  display: block;
}

dl::before,
dl::after,
ul::before,
ul::after,
ol::before,
ol::after {
  content: '';
  display: block;
  float: none;
  clear: both;
}

ol {
  padding-left: 1.25rem;
  padding-right: var(--padding_base);
}

/* ===  内容标签  === */
sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

output {
  display: inline-block;
}

summary {
  cursor: pointer;
}

template {
  display: none;
}

abbr[title],
abbr[data-original-title] {
  border-bottom: 0;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-skip-ink: none;
}

/* ===  字体大小  === */
h1,
.h1 {
  font-size: var(--font_huge);
}

h2,
.h2 {
  font-size: var(--font_larger);
}

h3,
.h3 {
  font-size: var(--font_big);
}

h4,
.h4 {
  font-size: var(--font_base);
}

h5,
.h5 {
  font-size: var(--font_small);
}

h6,
.h6 {
  font-size: var(--font_mini);
}

h1,
.h1,
h2,
.h2 {
  font-weight: 600;
}

h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 550;
}

small,
.font-sm {
  font-size: 75% !important;
}

big,
.font-bg {
  font-size: 125% !important;
}

/* ===  媒体标签  === */
/* 图片 */
img {
  border: none;
  vertical-align: middle;
}

/* 图片相框 */
figure {
  position: relative;
  overflow: hidden;
  display: block;
  background: center center no-repeat;
  background-size: 100%;
}

figure img {
  width: 100%;
  display: block;
}

/* 图片描述 */
figcaption {
  display: block;
}

figure ~ div {
  overflow: hidden;
}

/* 链接 */
a {
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

nav > a {
  display: inline-block;
}

a:hover,
a:not([href]) {
  text-decoration: none;
}

/* 文章间距 */
section h1,
section h2,
section h3,
section h4,
section h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

section p,
section blockquote {
  margin-bottom: 1rem;
}

section blockquote > * {
  margin-bottom: 0;
}

section h1,
section h2,
section h3 {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color_border);
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mm_page {
  height: 100%;
  overflow: auto;
}

.mm_warp {
  clear: both;
  float: none;
}

main {
  margin-bottom: 2.5rem;
  transition: all 0.5s ease-in-out;
}

.mm_page > header {
  min-height: var(--height_big);
  display: block;
  position: absolute;
  z-index: 10;
  right: 0;
  top: 0;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.mm_page > header ~ main {
  margin-top: 2.5rem;
}

.mm_page > footer {
  min-height: var(--height_small);
  display: block;
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.mm_side .mm_warp {
  position: absolute;
  z-index: 32;
  top: 0;
  left: 0;
  height: 100%;
  width: 12rem;
  white-space: nowrap;
  transition: all 0.5s ease-in-out;
}

.mm_view {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

main .mm_view {
  overflow-x: auto;
}

.mm_view::-webkit-scrollbar {
  display: none;
}

.mm_table img {
  max-height: 5rem;
}

.mm_table .btn_open {
  width: 1.5rem;
  line-height: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  text-align: center;
  padding: 0;
}

.mm_table .fa-caret-right {
  transform: rotate(0deg);
  transition: transform ease-in-out 0.5s;
}

.mm_table .open .fa-caret-right {
  transform: rotate(90deg);
}

.mm_table .sub {
  background: rgba(0, 0, 0, 0.02);
}

.mm_table .sub .btn_open {
  margin-left: 1.5rem;
}

.mm_table .no_sub .btn_open {
  opacity: 0.5;
}

header.hide-x {
  top: -100%;
}

footer.hide-x {
  bottom: -100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: block;
  background-color: var(--color_mask);
  transition: opacity 0.5s ease;
  z-index: 31;
}

.hide-x .mask {
  width: 0;
  height: 0;
  opacity: 0;
}

/* 栅格 */
.mm_container {
  width: 100%;
  max-width: 77rem;
  margin-right: auto;
  margin-left: auto;
}

.mm_row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.mm_grid {
  max-width: 76rem;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap;
  display: flex;
  align-content: flex-start;
  align-items: stretch;
  justify-content: flex-start;
  justify-items: stretch;
}

.mm_col {
  max-width: 100%;
}

/**
 * 卡片
 */
.mm_card {
  border-radius: var(--radius_small);
  height: calc(100% - var(--margin_small) * 2);
  margin: var(--margin_small);
  overflow: hidden;
}

.card_head::before,
.card_head::after,
.card_body::before,
.card_body::after,
.card_foot::before,
.card_foot::after {
  content: '';
  display: block;
  float: none;
  clear: both;
}

.card_body {
  position: relative;
}

.card_head {
  position: relative;
  padding: var(--padding_mini) var(--padding_base);
}

.card_head ~ .card_body {
  border-top: 1px solid rgba(125, 125, 125, 0.25);
}

.card_foot {
  position: relative;
  padding: var(--padding_mini) var(--padding_base);
}

/* 列表 */
.mm_list,
.mm_info {
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.mm_list > *,
.mm_info > * {
  display: block;
  float: left;
  list-style: none;
  position: relative;
  min-width: 8.333333%;
}

ul.mm_list li {
  list-style: none;
  float: left;
  overflow: hidden;
}

ol.mm_list {
  list-style-type: none;
  counter-reset: step;
  counter-increment: step 0;
  padding-left: 2.75rem;
}

ol.mm_list li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: -1.75rem;
  top: 50%;
  display: block;
  width: 1.125rem;
  line-height: 1.125rem;
  text-align: center;
  border-radius: 0.125rem;
  transform: translateY(-50%);
  letter-spacing: 0;
  font-size: var(--font_mini);
  height: 1.125rem;
}

/* ===  布局控制  === */
.mm_item {
  position: relative;
  width: 100%;
}

.media {
  padding: var(--padding_mini);
}

.doc {
  padding: var(--padding_mini);
  overflow: hidden;
}

.item-ltb .mm_item,
.item-rtb .mm_item,
.item-rr .mm_item,
.item-rl .mm_item,
.item-ll .mm_item,
.item-lr .mm_item {
  padding-left: var(--padding_mini);
  padding-right: var(--padding_mini);
}

.item-tb .media ~ .doc {
  padding-top: 0;
}

.mm_item .title,
.mm_item .content {
  overflow: hidden;
}

.item-ltb .media {
  float: left;
}

.item-rtb .media {
  float: right;
  margin-left: var(--margin_small);
}

.item-ll .media,
.item-lr .media {
  float: left;
}

.item-ll .title,
.item-lr .title {
  float: left;
  margin-right: var(--margin_small);
  min-width: 2rem;
}

.item-lr .content {
  text-align: right;
}

.item-rl .media,
.item-rr .media {
  float: right;
}

.item-rl .title {
  float: left;
  margin-right: var(--margin_small);
}

.item-rr .title {
  float: right;
}

.mobile .mm_item {
  border-bottom: 1px solid var(--color_border);
  margin-bottom: -1px;
}

.mm_group {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding-left: 1px;
  padding-right: 1px;
}

.mm_group > * {
  margin-right: -1px;
  flex: 1;
  float: left;
  border-radius: 0 !important;
  white-space: nowrap;
}

.mm_group > *:focus {
  z-index: 20;
}

.mm_group > *:first-child {
  margin-left: -1px;
}

.mm_group > input ~ .mm_btn,
.mm_group > input ~ [class*='mm_btn_'] {
  flex: inherit;
}

.mm_group > span,
.mm_group > .unit,
.mm_group > .title {
  flex: inherit;
  padding-left: var(--padding_base);
  padding-right: var(--padding_base);
  background-color: var(--color_light);
  border: 1px solid var(--color_border);
  font-size: 0.75rem;
  text-align: center;
}

.group-0 > *:first-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.group-0 > *:last-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.group-1 > *:first-child {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.group-1 > *:last-child {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.group-2 > *:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.group-2 > *:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.mm_info .mm_item {
  border-top: none;
  border-bottom: none;
  overflow: hidden;
}

.mm_info .title {
  display: flex;
  align-items: center;
}

.mm_info .title::after,
.mm_info .content::after {
  content: '';
  display: block;
  border-bottom: 1px solid var(--color_border);
  position: absolute;
  bottom: 0;
  width: 100%;
}

.mm_info.item-rtb.img-base .media ~ .title::after,
.mm_info.item-rtb.img-base .media ~ .content::after {
  width: calc(
    100% - var(--img_size_base) - var(--margin_base) * 2 - var(--padding_base)
  );
}

.mm_info.item-rtb.img-big .media ~ .title::after,
.mm_info.item-rtb.img-big .media ~ .content::after {
  width: calc(
    100% - var(--img_size_big) - var(--margin_base) * 2 - var(--padding_base)
  );
}

.mm_info .content img {
  max-width: 16.25rem;
  max-height: 16.25rem;
}

.info-base .mm_item {
  display: flex;
}

.info-base .mm_item .title {
  min-width: 5rem;
}

.info-base .mm_item .content {
  color: var(--color_default);
}

.info-base .mm_item .mm_grid {
  width: 90%;
}

/* ===  表单  === */
.mobile input[type='range'],
.mobile input[type='text'],
.mobile input[type='number'],
.mobile input[type='password'],
.mobile input[type='tel'],
.mobile input[type='email'],
.mobile input[type='date'],
.mobile input[type='datetime'],
.mobile input[type='time'],
.mobile input[type='datetime-local'],
.mobile input[type='month'],
.mobile input[type='week'],
.mobile input[type='url'] {
  width: 100%;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.mobile textarea {
  border: none;
  padding: var(--padding_mini) 0;
  min-width: auto;
}

.mobile select ~ input[type='text'],
.mobile select ~ input[type='number'],
.mobile select ~ input[type='tel'] {
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  width: initial;
}

.card-full {
  margin: var(--margin_small);
  height: calc(100% - var(--margin_base));
}

.table-sm td,
.table-sm th {
  padding: 0.25rem var(--padding_mini);
}

/* ===  模态窗  === */
.mm_modal {
  position: fixed;
  z-index: 30;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(-100%, -100%);
}

.mm_modal .mask {
  transition: all 0.2s ease-in-out;
}

.mm_modal.show {
  transform: translate(0, 0);
}

.mm_modal .mm_body {
  background: #fff;
}

.mm_modal .popup {
  position: absolute;
  z-index: 32;
}

/* 所有CSS属性都拥有过渡属性，动画持续时间3s 延迟2s触发 linear的触发函数 */
.trans {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.show [class*='from_'] {
  position: absolute;
  z-index: 40;
  width: 100%;
}

.show .from_default {
  max-width: 30rem;
  min-height: 7.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

.from_left {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-width: 18.75rem;
  transform: translate(-100%, 0);
}

.from_right {
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  max-width: 18.75rem;
  transform: translate(100%, 0);
}

.from_top {
  top: 0;
  left: 0;
  right: 0;
  transform: translate(0, -100%);
}

.from_bottom {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0, 100%);
}

.from_center {
  top: 50%;
  left: 50%;
  width: 25%;
  max-width: 30rem;
  transform: translate(-50%, -50%);
}

.show .from_left,
.show .from_right,
.show .from_top,
.show .from_bottom,
.show .from_center {
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.show .from_left,
.show .from_right,
.show .from_top,
.show .from_bottom {
  transform: translate(0, 0);
}

.show .from_center {
  width: 100%;
}

.value label {
  margin-right: var(--margin_base);
  display: block;
  float: left;
}

.mobile .value label {
  float: none;
}

.mm_form dt {
  line-height: 2rem;
}

.mm_form dd {
  line-height: 1;
}

.mm_icon {
  background: center center no-repeat;
  background-size: 100%;
}

@media (max-width: 576px) {
  .mm_side.hide-x .mm_warp {
    left: -100%;
  }

  .mm_form dt {
    float: none;
    padding-bottom: 0;
  }

  .mm_form dd {
    float: none;
    padding-top: 0;
  }
}

@media (min-width: 576px) {
  .mm_side ~ header,
  .mm_side ~ footer {
    width: calc(100% - 12rem);
  }

  .mm_side ~ main {
    margin-left: 12rem;
  }

  .mm_side ~ header .mm_container,
  .mm_side ~ footer .mm_container,
  .mm_side ~ main .mm_container {
    max-width: initial;
  }

  .mm_side ~ main .mm_row {
    justify-content: left;
  }

  .mm_side.fold ~ header,
  .mm_side.fold ~ footer {
    width: calc(100% - 2.5rem);
  }

  .mm_side.fold ~ main {
    margin-left: 2.5rem;
  }

  .mm_side.fold .mm_warp {
    width: 2.5rem;
  }

  .mm_side.fold .btn:after {
    content: none;
  }

  .mm_side.fold .box {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 12rem;
    background: #fff;
    border: 1px solid rgba(125, 125, 125, 0.25);
    box-shadow: 0 0.25rem 0.5rem 0 rgba(7, 17, 27, 0.1);
  }

  .mm_side.fold .mm_item:hover .box {
    display: block;
    max-height: initial;
  }

  .mm_side.fold .box a:hover {
    background: var(--color_primary);
  }
}

/* 显示隐藏 */
.show {
  display: block !important;
}

.show_phone {
  display: none !important;
}

.show_pad {
  display: none !important;
}

.show_pc {
  display: none !important;
}

.hide {
  display: none !important;
}

.hide_phone {
  display: block !important;
}

.hide_pad {
  display: block !important;
}

.hide_pc {
  display: block !important;
}

@media (max-width: 576px) {
  .show_phone {
    display: block !important;
  }

  .hide_phone {
    display: none !important;
  }
}

@media (min-width: 576px and min-width:992px) {
  .show_pad {
    display: block !important;
  }

  .hide_pad {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .show_pc {
    display: block !important;
  }

  .hide_pc {
    display: none !important;
  }
}

/* 基本元素 */
/**
 * 卡片
 */
.card {
  border-radius: var(--radius_small);
  overflow: hidden;
}

.stroke {
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--color_base);
}

.arrow,
.item-arrow > * {
  padding-right: var(--padding_larger) !important;
}

.arrow::after,
.item-arrow > *::after {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  content: '';
  padding: 3px;
  display: block;
  border: 1px solid var(--color_default_h);
  border-width: 0 1px 1px 0;
  transition: all 0.2s;
}

.title-right .content {
  text-align: right;
}

.content-right .content {
  text-align: right;
}

/* 栅格 */
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.row-auto > * {
  flex: 1;
}

.row-1 > * {
  -ms-flex: 100%;
  flex-basis: 100%;
  width: 100%;
}

.row-2 > * {
  -ms-flex: 50%;
  flex-basis: 50%;
  width: 50%;
}

.row-3 > * {
  -ms-flex: 33.333333%;
  flex-basis: 33.333333%;
  width: 33.333333%;
}

.row-4 > * {
  -ms-flex: 25%;
  flex-basis: 25%;
  width: 25%;
}

.row-5 > * {
  -ms-flex: 20%;
  flex-basis: 20%;
  width: 20%;
}

.row-6 > * {
  -ms-flex: 16.666667%;
  flex-basis: 16.666667%;
  width: 16.666667%;
}

.row-8 > * {
  -ms-flex: 12.5%;
  flex-basis: 12.5%;
  width: 12.5%;
}

.row-10 > * {
  -ms-flex: 10%;
  flex-basis: 10%;
  width: 10%;
}

.row-12 > * {
  -ms-flex: 8.333333%;
  flex-basis: 8.333333%;
  width: 8.333333%;
}

/* ===  列表  === */
.list-auto > * {
  flex: 1;
}

.list-x > * {
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid var(--color_border);
}

.list-1 > * {
  width: 100%;
  flex-basis: 100%;
}

.list-2 > * {
  width: 50%;
  flex-basis: 50%;
}

.list-3 > * {
  width: 33.333333%;
  flex-basis: 33.333333%;
}

.list-4 > * {
  width: 25%;
  flex-basis: 25%;
}

.list-5 > * {
  width: 20%;
  flex-basis: 20%;
}

.list-6 > * {
  width: 16.666666%;
  flex-basis: 16.666666%;
}

.list-8 > * {
  width: 12.5%;
  flex-basis: 12.5%;
}

.list-10 > * {
  width: 10%;
  flex-basis: 10%;
}

.list-12 > * {
  width: 8.333333%;
  flex-basis: 8.333333%;
}

.grid-x > * {
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid var(--color_border);
}

.grid-auto > * {
  flex: 1;
}

.grid-img {
  padding-right: 0.125rem;
  padding-bottom: 0.125rem;
  overflow: hidden;
}

.grid-1 > * {
  width: 100%;
  flex-basis: 100%;
}

.grid-2 > * {
  width: 50%;
  flex-basis: 50%;
}

.grid-3 > * {
  width: 33.333333%;
  flex-basis: 33.333333%;
}

.grid-4 > * {
  width: 25%;
  flex-basis: 25%;
}

.grid-5 > * {
  width: 20%;
  flex-basis: 20%;
}

.grid-6 > * {
  width: 16.666666%;
  flex-basis: 16.666666%;
}

.grid-8 > * {
  width: 12.5%;
  flex-basis: 12.5%;
}

.grid-10 > * {
  width: 10%;
  flex-basis: 10%;
}

.grid-12 > * {
  width: 8.333333%;
  flex-basis: 8.333333%;
}

.mobile .list-2 > *,
.mobile .list-3 > *,
.mobile .list-4 > *,
.mobile .list-5 > *,
.mobile .list-6 > *,
.mobile .list-8 > *,
.mobile .list-10 > *,
.mobile .list-12 > * {
  border-right: 1px solid var(--color_border);
}

.mobile .list-2 > *:nth-child(2n),
.mobile .list-3 > *:nth-child(3n),
.mobile .list-4 > *:nth-child(4n),
.mobile .list-5 > *:nth-child(5n),
.mobile .list-6 > *:nth-child(6n),
.mobile .list-8 > *:nth-child(8n),
.mobile .list-10 > *:nth-child(10n),
.mobile .list-12 > *:nth-child(12n) {
  border-right: none;
}

@media (min-width: 576px) {
  .container {
    max-width: 33.75rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 45rem;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 60rem;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 71.25rem;
  }
}

.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  max-width: initial;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 33.75rem;
  }
}

@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 45rem;
  }
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 60rem;
  }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 71.25rem;
  }
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  position: relative;
  width: 100%;
}

.w-auto,
.col-auto {
  -ms-flex: auto !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

.col-1 {
  -ms-flex: 8.333333% !important;
  flex-basis: 8.333333% !important;
  width: 8.333333 !important;
}

.col-2 {
  -ms-flex: 16.666667% !important;
  flex-basis: 16.666667% !important;
  width: 16.666667% !important;
}

.w-25,
.col-3 {
  -ms-flex: 25% !important;
  flex-basis: 25% !important;
  width: 25% !important;
}

.w-33,
.col-4 {
  -ms-flex: 33.333333% !important;
  flex-basis: 33.333333% !important;
  width: 33.333333% !important;
}

.col-5 {
  -ms-flex: 41.666667% !important;
  flex-basis: 41.666667% !important;
  width: 41.666667% !important;
}

.w-50,
.col-6 {
  -ms-flex: 50% !important;
  flex-basis: 50% !important;
  width: 50% !important;
}

.col-7 {
  -ms-flex: 58.333333% !important;
  flex-basis: 58.333333% !important;
  width: 58.333333% !important;
}

.w-66,
.col-8 {
  -ms-flex: 66.666667% !important;
  flex-basis: 66.666667% !important;
  width: 66.666667% !important;
}

.w-75,
.col-9 {
  -ms-flex: 75% !important;
  flex-basis: 75% !important;
  width: 75% !important;
}

.col-10 {
  -ms-flex: 83.333333% !important;
  flex-basis: 83.333333% !important;
  width: 83.333333% !important;
}

.col-11 {
  -ms-flex: 91.666667% !important;
  flex-basis: 91.666667% !important;
  width: 91.666667% !important;
}

.w-100,
.col-12 {
  -ms-flex: 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
}

.w-10 {
  -ms-flex: 10% !important;
  flex-basis: 10% !important;
  width: 10% !important;
}

.w-20 {
  -ms-flex: 20% !important;
  flex-basis: 20% !important;
  width: 20% !important;
}

.w-30 {
  -ms-flex: 30% !important;
  flex-basis: 30% !important;
  width: 30% !important;
}

.w-40 {
  -ms-flex: 40% !important;
  flex-basis: 40% !important;
  width: 40% !important;
}

.w-60 {
  -ms-flex: 60% !important;
  flex-basis: 60% !important;
  width: 60% !important;
}

.w-80 {
  -ms-flex: 80% !important;
  flex-basis: 80% !important;
  width: 80% !important;
}

@media (max-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .row-mm-1 > * {
    -ms-flex: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .row-mm-2 > * {
    -ms-flex: 50%;
    flex-basis: 50%;
    width: 50%;
  }

  .row-mm-3 > * {
    -ms-flex: 33.333333%;
    flex-basis: 33.333333%;
    width: 33.333333%;
  }

  .row-mm-4 > * {
    -ms-flex: 25%;
    flex-basis: 25%;
    width: 25%;
  }

  .row-mm-5 > * {
    -ms-flex: 20%;
    flex-basis: 20%;
    width: 20%;
  }

  .row-mm-6 > * {
    -ms-flex: 16.666667%;
    flex-basis: 16.666667%;
    width: 16.666667%;
  }

  .row-mm-8 > * {
    -ms-flex: 12.5%;
    flex-basis: 12.5%;
    width: 12.5%;
  }

  .row-mm-10 > * {
    -ms-flex: 10%;
    flex-basis: 10%;
    width: 10%;
  }

  .row-mm-12 > * {
    -ms-flex: 8.333333%;
    flex-basis: 8.333333%;
    width: 8.333333%;
  }

  .w-mm-auto,
  .col-mm-auto {
    -ms-flex: auto !important;
    flex-basis: auto !important;
    width: auto;
    max-width: 100% !important;
  }

  .col-mm-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }

  .col-mm-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }

  .w-mm-25,
  .col-mm-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }

  .w-mm-33,
  .col-mm-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }

  .col-mm-5 {
    -ms-flex: 41.666667% !important;
    flex-basis: 41.666667% !important;
    width: 41.666667% !important;
  }

  .w-mm-50,
  .col-mm-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .col-mm-7 {
    -ms-flex: 58.333333% !important;
    flex-basis: 58.333333% !important;
    width: 58.333333% !important;
  }

  .w-mm-66,
  .col-mm-8 {
    -ms-flex: 66.666667% !important;
    flex-basis: 66.666667% !important;
    width: 66.666667% !important;
  }

  .w-mm-75,
  .col-mm-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }

  .col-mm-10 {
    -ms-flex: 83.333333% !important;
    flex-basis: 83.333333% !important;
    width: 83.333333% !important;
  }

  .col-mm-11 {
    -ms-flex: 91.666667% !important;
    flex-basis: 91.666667% !important;
    width: 91.666667% !important;
  }

  .w-mm-100,
  .col-mm-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .list-mm-1 > * {
    width: 100%;
    flex-basis: 100%;
  }

  .list-mm-2 > * {
    width: 50%;
    flex-basis: 50%;
  }

  .list-mm-3 > * {
    width: 33.333333%;
    flex-basis: 33.333333%;
  }

  .list-mm-4 > * {
    width: 25%;
    flex-basis: 25%;
  }

  .list-mm-5 > * {
    width: 20%;
    flex-basis: 20%;
  }

  .list-mm-6 > * {
    width: 16.666666%;
    flex-basis: 16.666666%;
  }

  .list-mm-8 > * {
    width: 12.5%;
    flex-basis: 12.5%;
  }

  .list-mm-10 > * {
    width: 10%;
    flex-basis: 10%;
  }

  .list-mm-12 > * {
    width: 8.333333%;
    flex-basis: 8.333333%;
  }

  .mobile .list-mm-2 > *,
  .mobile .list-mm-3 > *,
  .mobile .list-mm-4 > *,
  .mobile .list-mm-5 > *,
  .mobile .list-mm-6 > *,
  .mobile .list-mm-8 > *,
  .mobile .list-mm-10 > *,
  .mobile .list-mm-12 > * {
    border-right: 1px solid var(--color_border);
  }

  .mobile .list-mm-2 > *:nth-child(2n),
  .mobile .list-mm-3 > *:nth-child(3n),
  .mobile .list-mm-4 > *:nth-child(4n),
  .mobile .list-mm-5 > *:nth-child(5n),
  .mobile .list-mm-6 > *:nth-child(6n),
  .mobile .list-mm-8 > *:nth-child(8n),
  .mobile .list-mm-10 > *:nth-child(10n),
  .mobile .list-mm-12 > *:nth-child(12n) {
    border-right: none;
  }
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .row-sm-1 > * {
    -ms-flex: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .row-sm-2 > * {
    -ms-flex: 50%;
    flex-basis: 50%;
    width: 50%;
  }

  .row-sm-3 > * {
    -ms-flex: 33.333333%;
    flex-basis: 33.333333%;
    width: 33.333333%;
  }

  .row-sm-4 > * {
    -ms-flex: 25%;
    flex-basis: 25%;
    width: 25%;
  }

  .row-sm-5 > * {
    -ms-flex: 20%;
    flex-basis: 20%;
    width: 20%;
  }

  .row-sm-6 > * {
    -ms-flex: 16.666667%;
    flex-basis: 16.666667%;
    width: 16.666667%;
  }

  .row-sm-8 > * {
    -ms-flex: 12.5%;
    flex-basis: 12.5%;
    width: 12.5%;
  }

  .row-sm-10 > * {
    -ms-flex: 10%;
    flex-basis: 10%;
    width: 10%;
  }

  .row-sm-12 > * {
    -ms-flex: 8.333333%;
    flex-basis: 8.333333%;
    width: 8.333333%;
  }

  .w-sm-auto,
  .col-sm-auto {
    -ms-flex: auto !important;
    flex-basis: auto !important;
    width: auto;
    max-width: 100% !important;
  }

  .col-sm-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }

  .col-sm-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }

  .w-sm-25,
  .col-sm-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }

  .w-sm-33,
  .col-sm-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }

  .col-sm-5 {
    -ms-flex: 41.666667% !important;
    flex-basis: 41.666667% !important;
    width: 41.666667% !important;
  }

  .w-sm-50,
  .col-sm-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .col-sm-7 {
    -ms-flex: 58.333333% !important;
    flex-basis: 58.333333% !important;
    width: 58.333333% !important;
  }

  .w-sm-66,
  .col-sm-8 {
    -ms-flex: 66.666667% !important;
    flex-basis: 66.666667% !important;
    width: 66.666667% !important;
  }

  .w-sm-75,
  .col-sm-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }

  .col-sm-10 {
    -ms-flex: 83.333333% !important;
    flex-basis: 83.333333% !important;
    width: 83.333333% !important;
  }

  .col-sm-11 {
    -ms-flex: 91.666667% !important;
    flex-basis: 91.666667% !important;
    width: 91.666667% !important;
  }

  .w-sm-100,
  .col-sm-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .w-sm-10 {
    -ms-flex: 10% !important;
    flex-basis: 10% !important;
    width: 10% !important;
  }

  .w-sm-20 {
    -ms-flex: 20% !important;
    flex-basis: 20% !important;
    width: 20% !important;
  }

  .w-sm-30 {
    -ms-flex: 30% !important;
    flex-basis: 30% !important;
    width: 30% !important;
  }

  .w-sm-40 {
    -ms-flex: 40% !important;
    flex-basis: 40% !important;
    width: 40% !important;
  }

  .w-sm-60 {
    -ms-flex: 60% !important;
    flex-basis: 60% !important;
    width: 60% !important;
  }

  .w-sm-80 {
    -ms-flex: 80% !important;
    flex-basis: 80% !important;
    width: 80% !important;
  }

  .list-sm-1 > * {
    width: 100%;
    flex-basis: 100%;
  }

  .list-sm-2 > * {
    width: 50%;
    flex-basis: 50%;
  }

  .list-sm-3 > * {
    width: 33.333333%;
    flex-basis: 33.333333%;
  }

  .list-sm-4 > * {
    width: 25%;
    flex-basis: 25%;
  }

  .list-sm-5 > * {
    width: 20%;
    flex-basis: 20%;
  }

  .list-sm-6 > * {
    width: 16.666666%;
    flex-basis: 16.666666%;
  }

  .list-sm-8 > * {
    width: 12.5%;
    flex-basis: 12.5%;
  }

  .list-sm-10 > * {
    width: 10%;
    flex-basis: 10%;
  }

  .list-sm-12 > * {
    width: 8.333333%;
    flex-basis: 8.333333%;
  }

  .mobile .list-sm-2 > *,
  .mobile .list-sm-3 > *,
  .mobile .list-sm-4 > *,
  .mobile .list-sm-5 > *,
  .mobile .list-sm-6 > *,
  .mobile .list-sm-8 > *,
  .mobile .list-sm-10 > *,
  .mobile .list-sm-12 > * {
    border-right: 1px solid var(--color_border);
  }

  .mobile .list-sm-2 > *:nth-child(2n),
  .mobile .list-sm-3 > *:nth-child(3n),
  .mobile .list-sm-4 > *:nth-child(4n),
  .mobile .list-sm-5 > *:nth-child(5n),
  .mobile .list-sm-6 > *:nth-child(6n),
  .mobile .list-sm-8 > *:nth-child(8n),
  .mobile .list-sm-10 > *:nth-child(10n),
  .mobile .list-sm-12 > *:nth-child(12n) {
    border-right: none;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .row-md-1 > * {
    -ms-flex: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .row-md-2 > * {
    -ms-flex: 50%;
    flex-basis: 50%;
    width: 50%;
  }

  .row-md-3 > * {
    -ms-flex: 33.333333%;
    flex-basis: 33.333333%;
    width: 33.333333%;
  }

  .row-md-4 > * {
    -ms-flex: 25%;
    flex-basis: 25%;
    width: 25%;
  }

  .row-md-5 > * {
    -ms-flex: 20%;
    flex-basis: 20%;
    width: 20%;
  }

  .row-md-6 > * {
    -ms-flex: 16.666667%;
    flex-basis: 16.666667%;
    width: 16.666667%;
  }

  .row-md-8 > * {
    -ms-flex: 12.5%;
    flex-basis: 12.5%;
    width: 12.5%;
  }

  .row-md-10 > * {
    -ms-flex: 10%;
    flex-basis: 10%;
    width: 10%;
  }

  .row-md-12 > * {
    -ms-flex: 8.333333%;
    flex-basis: 8.333333%;
    width: 8.333333%;
  }

  .w-md-auto,
  .col-md-auto {
    -ms-flex: auto !important;
    flex-basis: auto !important;
    width: auto;
    max-width: 100% !important;
  }

  .col-md-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }

  .col-md-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }

  .w-md-25,
  .col-md-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }

  .w-md-33,
  .col-md-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }

  .col-md-5 {
    -ms-flex: 41.666667% !important;
    flex-basis: 41.666667% !important;
    width: 41.666667% !important;
  }

  .w-md-50,
  .col-md-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .col-md-7 {
    -ms-flex: 58.333333% !important;
    flex-basis: 58.333333% !important;
    width: 58.333333% !important;
  }

  .w-md-66,
  .col-md-8 {
    -ms-flex: 66.666667% !important;
    flex-basis: 66.666667% !important;
    width: 66.666667% !important;
  }

  .w-md-75,
  .col-md-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }

  .col-md-10 {
    -ms-flex: 83.333333% !important;
    flex-basis: 83.333333% !important;
    width: 83.333333% !important;
  }

  .col-md-11 {
    -ms-flex: 91.666667% !important;
    flex-basis: 91.666667% !important;
    width: 91.666667% !important;
  }

  .w-md-100,
  .col-md-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .w-md-10 {
    -ms-flex: 10% !important;
    flex-basis: 10% !important;
    width: 10% !important;
  }

  .w-md-20 {
    -ms-flex: 20% !important;
    flex-basis: 20% !important;
    width: 20% !important;
  }

  .w-md-30 {
    -ms-flex: 30% !important;
    flex-basis: 30% !important;
    width: 30% !important;
  }

  .w-md-40 {
    -ms-flex: 40% !important;
    flex-basis: 40% !important;
    width: 40% !important;
  }

  .w-md-60 {
    -ms-flex: 60% !important;
    flex-basis: 60% !important;
    width: 60% !important;
  }

  .w-md-80 {
    -ms-flex: 80% !important;
    flex-basis: 80% !important;
    width: 80% !important;
  }

  .list-md-1 > * {
    width: 100%;
    flex-basis: 100%;
  }

  .list-md-2 > * {
    width: 50%;
    flex-basis: 50%;
  }

  .list-md-3 > * {
    width: 33.333333%;
    flex-basis: 33.333333%;
  }

  .list-md-4 > * {
    width: 25%;
    flex-basis: 25%;
  }

  .list-md-5 > * {
    width: 20%;
    flex-basis: 20%;
  }

  .list-md-6 > * {
    width: 16.666666%;
    flex-basis: 16.666666%;
  }

  .list-md-8 > * {
    width: 12.5%;
    flex-basis: 12.5%;
  }

  .list-md-10 > * {
    width: 10%;
    flex-basis: 10%;
  }

  .list-md-12 > * {
    width: 8.333333%;
    flex-basis: 8.333333%;
  }

  .mobile .list-md-2 > *,
  .mobile .list-md-3 > *,
  .mobile .list-md-4 > *,
  .mobile .list-md-5 > *,
  .mobile .list-md-6 > *,
  .mobile .list-md-8 > *,
  .mobile .list-md-10 > *,
  .mobile .list-md-12 > * {
    border-right: 1px solid var(--color_border);
  }

  .mobile .list-md-2 > *:nth-child(2n),
  .mobile .list-md-3 > *:nth-child(3n),
  .mobile .list-md-4 > *:nth-child(4n),
  .mobile .list-md-5 > *:nth-child(5n),
  .mobile .list-md-6 > *:nth-child(6n),
  .mobile .list-md-8 > *:nth-child(8n),
  .mobile .list-md-10 > *:nth-child(10n),
  .mobile .list-md-12 > *:nth-child(12n) {
    border-right: none;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .row-lg-1 > * {
    -ms-flex: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .row-lg-2 > * {
    -ms-flex: 50%;
    flex-basis: 50%;
    width: 50%;
  }

  .row-lg-3 > * {
    -ms-flex: 33.333333%;
    flex-basis: 33.333333%;
    width: 33.333333%;
  }

  .row-lg-4 > * {
    -ms-flex: 25%;
    flex-basis: 25%;
    width: 25%;
  }

  .row-lg-5 > * {
    -ms-flex: 20%;
    flex-basis: 20%;
    width: 20%;
  }

  .row-lg-6 > * {
    -ms-flex: 16.666667%;
    flex-basis: 16.666667%;
    width: 16.666667%;
  }

  .row-lg-8 > * {
    -ms-flex: 12.5%;
    flex-basis: 12.5%;
    width: 12.5%;
  }

  .row-lg-10 > * {
    -ms-flex: 10%;
    flex-basis: 10%;
    width: 10%;
  }

  .row-lg-12 > * {
    -ms-flex: 8.333333%;
    flex-basis: 8.333333%;
    width: 8.333333%;
  }

  .w-lg-auto,
  .col-lg-auto {
    -ms-flex: auto !important;
    flex-basis: auto !important;
    width: auto;
    max-width: 100% !important;
  }

  .col-lg-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }

  .col-lg-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }

  .w-lg-25,
  .col-lg-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }

  .w-lg-33,
  .col-lg-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }

  .col-lg-5 {
    -ms-flex: 41.666667% !important;
    flex-basis: 41.666667% !important;
    width: 41.666667% !important;
  }

  .w-lg-50,
  .col-lg-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .col-lg-7 {
    -ms-flex: 58.333333% !important;
    flex-basis: 58.333333% !important;
    width: 58.333333% !important;
  }

  .w-lg-66,
  .col-lg-8 {
    -ms-flex: 66.666667% !important;
    flex-basis: 66.666667% !important;
    width: 66.666667% !important;
  }

  .w-lg-75,
  .col-lg-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }

  .col-lg-10 {
    -ms-flex: 83.333333% !important;
    flex-basis: 83.333333% !important;
    width: 83.333333% !important;
  }

  .col-lg-11 {
    -ms-flex: 91.666667% !important;
    flex-basis: 91.666667% !important;
    width: 91.666667% !important;
  }

  .w-lg-100,
  .col-lg-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .w-lg-10 {
    -ms-flex: 10% !important;
    flex-basis: 10% !important;
    width: 10% !important;
  }

  .w-lg-20 {
    -ms-flex: 20% !important;
    flex-basis: 20% !important;
    width: 20% !important;
  }

  .w-lg-30 {
    -ms-flex: 30% !important;
    flex-basis: 30% !important;
    width: 30% !important;
  }

  .w-lg-40 {
    -ms-flex: 40% !important;
    flex-basis: 40% !important;
    width: 40% !important;
  }

  .w-lg-60 {
    -ms-flex: 60% !important;
    flex-basis: 60% !important;
    width: 60% !important;
  }

  .w-lg-80 {
    -ms-flex: 80% !important;
    flex-basis: 80% !important;
    width: 80% !important;
  }

  .list-lg-1 > * {
    width: 100%;
    flex-basis: 100%;
  }

  .list-lg-2 > * {
    width: 50%;
    flex-basis: 50%;
  }

  .list-lg-3 > * {
    width: 33.333333%;
    flex-basis: 33.333333%;
  }

  .list-lg-4 > * {
    width: 25%;
    flex-basis: 25%;
  }

  .list-lg-5 > * {
    width: 20%;
    flex-basis: 20%;
  }

  .list-lg-6 > * {
    width: 16.666666%;
    flex-basis: 16.666666%;
  }

  .list-lg-8 > * {
    width: 12.5%;
    flex-basis: 12.5%;
  }

  .list-lg-10 > * {
    width: 10%;
    flex-basis: 10%;
  }

  .list-lg-12 > * {
    width: 8.333333%;
    flex-basis: 8.333333%;
  }

  .mobile .list-lg-2 > *,
  .mobile .list-lg-3 > *,
  .mobile .list-lg-4 > *,
  .mobile .list-lg-5 > *,
  .mobile .list-lg-6 > *,
  .mobile .list-lg-8 > *,
  .mobile .list-lg-10 > *,
  .mobile .list-lg-12 > * {
    border-right: 1px solid var(--color_border);
  }

  .mobile .list-lg-2 > *:nth-child(2n),
  .mobile .list-lg-3 > *:nth-child(3n),
  .mobile .list-lg-4 > *:nth-child(4n),
  .mobile .list-lg-5 > *:nth-child(5n),
  .mobile .list-lg-6 > *:nth-child(6n),
  .mobile .list-lg-8 > *:nth-child(8n),
  .mobile .list-lg-10 > *:nth-child(10n),
  .mobile .list-lg-12 > *:nth-child(12n) {
    border-right: none;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .row-xl-1 > * {
    -ms-flex: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  .row-xl-2 > * {
    -ms-flex: 50%;
    flex-basis: 50%;
    width: 50%;
  }

  .row-xl-3 > * {
    -ms-flex: 33.333333%;
    flex-basis: 33.333333%;
    width: 33.333333%;
  }

  .row-xl-4 > * {
    -ms-flex: 25%;
    flex-basis: 25%;
    width: 25%;
  }

  .row-xl-5 > * {
    -ms-flex: 20%;
    flex-basis: 20%;
    width: 20%;
  }

  .row-xl-6 > * {
    -ms-flex: 16.666667%;
    flex-basis: 16.666667%;
    width: 16.666667%;
  }

  .row-xl-8 > * {
    -ms-flex: 12.5%;
    flex-basis: 12.5%;
    width: 12.5%;
  }

  .row-xl-10 > * {
    -ms-flex: 10%;
    flex-basis: 10%;
    width: 10%;
  }

  .row-xl-12 > * {
    -ms-flex: 8.333333%;
    flex-basis: 8.333333%;
    width: 8.333333%;
  }

  .w-xl-auto,
  .col-xl-auto {
    -ms-flex: auto !important;
    flex-basis: auto !important;
    width: auto;
    max-width: 100% !important;
  }

  .col-xl-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }

  .col-xl-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }

  .w-xl-25,
  .col-xl-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }

  .w-xl-33,
  .col-xl-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }

  .col-xl-5 {
    -ms-flex: 41.666667% !important;
    flex-basis: 41.666667% !important;
    width: 41.666667% !important;
  }

  .w-xl-50,
  .col-xl-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .col-xl-7 {
    -ms-flex: 58.333333% !important;
    flex-basis: 58.333333% !important;
    width: 58.333333% !important;
  }

  .w-xl-66,
  .col-xl-8 {
    -ms-flex: 66.666667% !important;
    flex-basis: 66.666667% !important;
    width: 66.666667% !important;
  }

  .w-xl-75,
  .col-xl-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }

  .col-xl-10 {
    -ms-flex: 83.333333% !important;
    flex-basis: 83.333333% !important;
    width: 83.333333% !important;
  }

  .col-xl-11 {
    -ms-flex: 91.666667% !important;
    flex-basis: 91.666667% !important;
    width: 91.666667% !important;
  }

  .w-xl-100,
  .col-xl-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .w-xl-10 {
    -ms-flex: 10% !important;
    flex-basis: 10% !important;
    width: 10% !important;
  }

  .w-xl-20 {
    -ms-flex: 20% !important;
    flex-basis: 20% !important;
    width: 20% !important;
  }

  .w-xl-30 {
    -ms-flex: 30% !important;
    flex-basis: 30% !important;
    width: 30% !important;
  }

  .w-xl-40 {
    -ms-flex: 40% !important;
    flex-basis: 40% !important;
    width: 40% !important;
  }

  .w-xl-60 {
    -ms-flex: 60% !important;
    flex-basis: 60% !important;
    width: 60% !important;
  }

  .w-xl-80 {
    -ms-flex: 80% !important;
    flex-basis: 80% !important;
    width: 80% !important;
  }

  .list-xl-1 > * {
    width: 100%;
    flex-basis: 100%;
  }

  .list-xl-2 > * {
    width: 50%;
    flex-basis: 50%;
  }

  .list-xl-3 > * {
    width: 33.333333%;
    flex-basis: 33.333333%;
  }

  .list-xl-4 > * {
    width: 25%;
    flex-basis: 25%;
  }

  .list-xl-5 > * {
    width: 20%;
    flex-basis: 20%;
  }

  .list-xl-6 > * {
    width: 16.666666%;
    flex-basis: 16.666666%;
  }

  .list-xl-8 > * {
    width: 12.5%;
    flex-basis: 12.5%;
  }

  .list-xl-10 > * {
    width: 10%;
    flex-basis: 10%;
  }

  .list-xl-12 > * {
    width: 8.333333%;
    flex-basis: 8.333333%;
  }

  .mobile .list-xl-2 > *,
  .mobile .list-xl-3 > *,
  .mobile .list-xl-4 > *,
  .mobile .list-xl-5 > *,
  .mobile .list-xl-6 > *,
  .mobile .list-xl-8 > *,
  .mobile .list-xl-10 > *,
  .mobile .list-xl-12 > * {
    border-right: 1px solid var(--color_border);
  }

  .mobile .list-xl-2 > *:nth-child(2n),
  .mobile .list-xl-3 > *:nth-child(3n),
  .mobile .list-xl-4 > *:nth-child(4n),
  .mobile .list-xl-5 > *:nth-child(5n),
  .mobile .list-xl-6 > *:nth-child(6n),
  .mobile .list-xl-8 > *:nth-child(8n),
  .mobile .list-xl-10 > *:nth-child(10n),
  .mobile .list-xl-12 > *:nth-child(12n) {
    border-right: none;
  }
}

/* ===  对齐  === */
.fr {
  float: right !important;
}

.fl {
  float: left !important;
}

.fc {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fn {
  float: none !important;
  clear: both;
}

.cl {
  clear: left !important;
}

.cr {
  clear: right !important;
}

.cc {
  clear: both !important;
}

.cn {
  clear: none !important;
}

/* ===  文本对齐  === */
.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

/* ===  填充  === */
/* 基础 */
.pa {
  padding: var(--padding_small) !important;
}

.pb {
  padding-bottom: var(--padding_small) !important;
}

.pl {
  padding-left: var(--padding_small) !important;
}

.plr {
  padding-left: var(--padding_small);
  padding-right: var(--padding_small) !important;
}

.pr {
  padding-right: var(--padding_small) !important;
}

.pt {
  padding-top: var(--padding_small) !important;
}

.ptb {
  padding-top: var(--padding_small);
  padding-bottom: var(--padding_small) !important;
}

.pn {
  padding: 0 !important;
}

.pn-t {
  padding-top: 0 !important;
}

.pn-b {
  padding-bottom: 0 !important;
}

.pn-l {
  padding-left: 0 !important;
}

.pn-r {
  padding-right: 0 !important;
}

.pn-tb {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pn-lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 拓展 */
.pa-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pa-1 {
  padding: var(--padding_mini) !important;
}

.pt-1 {
  padding-top: var(--padding_mini) !important;
}

.pr-1 {
  padding-right: var(--padding_mini) !important;
}

.pl-1 {
  padding-left: var(--padding_mini) !important;
}

.pb-1 {
  padding-bottom: var(--padding_mini) !important;
}

.pa-2 {
  padding: var(--padding_small) !important;
}

.pt-2 {
  padding-top: var(--padding_small) !important;
}

.pr-2 {
  padding-right: var(--padding_small) !important;
}

.pl-2 {
  padding-left: var(--padding_small) !important;
}

.pb-2 {
  padding-bottom: var(--padding_small) !important;
}

.pa-3 {
  padding: var(--padding_base) !important;
}

.pt-3 {
  padding-top: var(--padding_base) !important;
}

.pr-3 {
  padding-right: var(--padding_base) !important;
}

.pl-3 {
  padding-left: var(--padding_base) !important;
}

.pb-3 {
  padding-bottom: var(--padding_base) !important;
}

.pa-4 {
  padding: var(--padding_larger) !important;
}

.pt-4 {
  padding-top: var(--padding_larger) !important;
}

.pr-4 {
  padding-right: var(--padding_larger) !important;
}

.pl-4 {
  padding-left: var(--padding_larger) !important;
}

.pb-4 {
  padding-bottom: var(--padding_larger) !important;
}

.pa-5 {
  padding: var(--padding_huge) !important;
}

.pt-5 {
  padding-top: var(--padding_huge) !important;
}

.pr-5 {
  padding-right: var(--padding_huge) !important;
}

.pl-5 {
  padding-left: var(--padding_huge) !important;
}

.pb-5 {
  padding-bottom: var(--padding_huge) !important;
}

.ptb-1 {
  padding-top: var(--padding_mini) !important;
  padding-bottom: var(--padding_mini) !important;
}

.ptb-2 {
  padding-top: var(--padding_small) !important;
  padding-bottom: var(--padding_small) !important;
}

.ptb-3 {
  padding-top: var(--padding_base) !important;
  padding-bottom: var(--padding_base) !important;
}

.ptb-4 {
  padding-top: var(--padding_larger) !important;
  padding-bottom: var(--padding_larger) !important;
}

.ptb-5 {
  padding-top: var(--padding_huge) !important;
  padding-bottom: var(--padding_huge) !important;
}

.plr-1 {
  padding-left: var(--padding_mini) !important;
  padding-right: var(--padding_mini) !important;
}

.plr-2 {
  padding-left: var(--padding_small) !important;
  padding-right: var(--padding_small) !important;
}

.plr-3 {
  padding-left: var(--padding_base) !important;
  padding-right: var(--padding_base) !important;
}

.plr-4 {
  padding-left: var(--padding_larger) !important;
  padding-right: var(--padding_larger) !important;
}

.plr-5 {
  padding-left: var(--padding_huge) !important;
  padding-right: var(--padding_huge) !important;
}

/* ===  间距  === */
.ma {
  margin: var(--margin_base) !important;
}

.mb {
  margin-bottom: var(--margin_base) !important;
}

.mc {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

.ml {
  margin-left: var(--margin_base) !important;
}

.mlr {
  margin-left: var(--margin_base);
  margin-right: var(--margin_base) !important;
}

.mr {
  margin-right: var(--margin_base) !important;
}

.mt {
  margin-top: var(--margin_base) !important;
}

.mtb {
  margin-top: var(--margin_base);
  margin-bottom: var(--margin_base) !important;
}

.mn {
  margin: 0 !important;
}

.mn-t {
  margin-top: 0 !important;
}

.mn-r {
  margin-right: 0 !important;
}

.mn-b {
  margin-bottom: 0 !important;
}

.mn-l {
  margin-left: 0 !important;
}

.mx {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.my {
  position: absolute;
  transform: translateY(-50%);
}

.mxy {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* 拓展 */
.ma-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ma-1 {
  margin: var(--margin_mini) !important;
}

.mt-1 {
  margin-top: var(--margin_mini) !important;
}

.mr-1 {
  margin-right: var(--margin_mini) !important;
}

.ml-1 {
  margin-left: var(--margin_mini) !important;
}

.mb-1 {
  margin-bottom: var(--margin_mini) !important;
}

.ma-2 {
  margin: var(--margin_small) !important;
}

.mt-2 {
  margin-top: var(--margin_small) !important;
}

.mr-2 {
  margin-right: var(--margin_small) !important;
}

.ml-2 {
  margin-left: var(--margin_small) !important;
}

.mb-2 {
  margin-bottom: var(--margin_small) !important;
}

.ma-3 {
  margin: var(--margin_base) !important;
}

.mt-3 {
  margin-top: var(--margin_base) !important;
}

.mr-3 {
  margin-right: var(--margin_base) !important;
}

.ml-3 {
  margin-left: var(--margin_base) !important;
}

.mb-3 {
  margin-bottom: var(--margin_base) !important;
}

.ma-4 {
  margin: var(--margin_larger) !important;
}

.mt-4 {
  margin-top: var(--margin_larger) !important;
}

.mr-4 {
  margin-right: var(--margin_larger) !important;
}

.ml-4 {
  margin-left: var(--margin_larger) !important;
}

.mb-4 {
  margin-bottom: var(--margin_larger) !important;
}

.ma-5 {
  margin: var(--margin_huge) !important;
}

.mt-5 {
  margin-top: var(--margin_huge) !important;
}

.mr-5 {
  margin-right: var(--margin_huge) !important;
}

.ml-5 {
  margin-left: var(--margin_huge) !important;
}

.mb-5 {
  margin-bottom: var(--margin_huge) !important;
}

.mtb-1 {
  margin-top: var(--margin_mini) !important;
  margin-bottom: var(--margin_mini) !important;
}

.mtb-2 {
  margin-top: var(--margin_small) !important;
  margin-bottom: var(--margin_small) !important;
}

.mtb-3 {
  margin-top: var(--margin_base) !important;
  margin-bottom: var(--margin_base) !important;
}

.mtb-4 {
  margin-top: var(--margin_larger) !important;
  margin-bottom: var(--margin_larger) !important;
}

.mtb-5 {
  margin-top: var(--margin_huge) !important;
  margin-bottom: var(--margin_huge) !important;
}

.mlr-1 {
  margin-left: var(--margin_mini) !important;
  margin-right: var(--margin_mini) !important;
}

.mlr-2 {
  margin-left: var(--margin_small) !important;
  margin-right: var(--margin_small) !important;
}

.mlr-3 {
  margin-left: var(--margin_base) !important;
  margin-right: var(--margin_base) !important;
}

.mlr-4 {
  margin-left: var(--margin_larger) !important;
  margin-right: var(--margin_larger) !important;
}

.mlr-5 {
  margin-left: var(--margin_huge) !important;
  margin-right: var(--margin_huge) !important;
}

/* ===  边框  === */
.ba {
  border: 1px solid var(--color_border) !important;
}

.bb {
  border-bottom: 1px solid var(--color_border) !important;
}

.bl {
  border-left: 1px solid var(--color_border) !important;
}

.blr {
  border-left: 1px solid var(--color_border) !important;
  border-right: 1px solid var(--color_border) !important;
}

.bn {
  border: none !important;
}

.br {
  border-right: 1px solid var(--color_border) !important;
}

.bt {
  border-top: 1px solid var(--color_border) !important;
}

.btb {
  border-top: 1px solid var(--color_border) !important;
  border-bottom: 1px solid var(--color_border) !important;
}

/* ===  圆角  === */
.b-a {
  border-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-b {
  border-bottom-right-radius: var(--radius_small) !important;
  border-bottom-left-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-c {
  border-radius: 50% !important;
  overflow: hidden;
}

.b-l {
  border-bottom-left-radius: var(--radius_small) !important;
  border-top-left-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-n {
  border-radius: 0 !important;
  overflow: hidden;
}

.b-r {
  border-bottom-right-radius: var(--radius_small) !important;
  border-top-right-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-t {
  border-top-left-radius: var(--radius_small) !important;
  border-top-right-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-lb {
  border-bottom-left-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-lt {
  border-top-left-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-rb {
  border-bottom-right-radius: var(--radius_small) !important;
  overflow: hidden;
}

.b-rt {
  border-top-right-radius: var(--radius_small) !important;
  overflow: hidden;
}

/** 图片 **/
.icon-x figure {
  border: 1px solid rgba(125, 125, 125, 0.25);
  padding: 0.5rem;
  background: #fff !important;
}

.size-huge,
.icon-huge img,
.img-huge .img {
  width: var(--img_size_huge);
  height: var(--img_size_huge);
}

.size-larger,
.icon-larger img,
.img-larger .img {
  width: var(--img_size_larger);
  height: var(--img_size_larger);
}

.size-big,
.icon-big img,
.img-big .img {
  width: var(--img_size_big);
  height: var(--img_size_big);
}

.size-base,
.icon-base img,
.img-base .img {
  width: var(--img_size_base);
  height: var(--img_size_base);
}

.size-small,
.icon-small img,
.img-small .img {
  width: var(--img_size_small);
  height: var(--img_size_small);
}

.size-mini,
.icon-mini img,
.img-mini .img {
  width: var(--img_size_mini);
  height: var(--img_size_mini);
}

.img_w-huge .img {
  width: var(--img_size_huge);
}

.img_w-larger .img {
  width: var(--img_size_larger);
}

.img_w-big .img {
  width: var(--img_size_big);
}

.img_w-base .img {
  width: var(--img_size_base);
}

.img_w-small .img {
  width: var(--img_size_small);
}

.img_w-mini .img {
  width: var(--img_size_mini);
}

.img_h-huge .img {
  height: var(--img_size_huge);
}

.img_h-larger .img {
  height: var(--img_size_larger);
}

.img_h-big .img {
  height: var(--img_size_big);
}

.img_h-base .img {
  height: var(--img_size_base);
}

.img_h-small .img {
  height: var(--img_size_small);
}

.img_h-mini .img {
  height: var(--img_size_mini);
}

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  /* 	-webkit-filter: grayscale(100%);
	filter: grayscale(100%); */
  border: none !important;
  background: rgba(250, 250, 250, 1);
  color: var(--color_default) !important;
}

.required {
  position: relative;
}

.required::before {
  position: absolute;
  content: '*';
  color: var(--color_error);
  left: 0;
  top: 1rem;
}

.mm_badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  color: #fff;
  background: var(--color_red);
}

.active,
.hover,
.focus,
.click {
  position: relative;
}

.mm_btn {
  display: inline-block;
  text-transform: none;
  cursor: pointer;
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  border-radius: var(--radius_small);
  font-size: 0.875rem;
}

/* 盒子 */
.mm_box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.mm_box::before,
.mm_box::after {
  display: block;
  content: '';
  clear: both;
  float: none;
}

.current .mm_box {
  display: inline-block;
}

/* ====== 表单 ====== */

/* 单选框 */
.mm_radio input {
  display: none;
}

.mm_radio .figure {
  position: relative;
  top: 3px;
  display: inline-block;
  overflow: hidden;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #38f;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.mm_radio .active .figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: ' ';
  display: inline-block;
  width: 0.325rem;
  height: 0.325rem;
  background: #38f;
  border-radius: 50%;
}

/* 发送验证码输入框 */
.mm_code .mm_group {
  border-bottom: none;
}

/* 计数器 */
.mm_number {
  display: inline-block;
}

.mm_number .value {
  display: flex;
}

.mm_number input::-webkit-outer-spin-button,
.mm_number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.mm_number input[type='number'] {
  border: none;
  text-align: center;
  -moz-appearance: textfield;
  height: 2rem;
  line-height: 2rem;
  min-width: auto;
}

.btn_del,
.btn_add {
  display: block;
  position: relative;
  line-height: 1;
}

.btn_del::before,
.btn_add::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 2px;
  background: #fff;
  line-height: 1;
}

.btn_add::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 0.5rem;
  background: #fff;
  line-height: 1;
}

/* 开关 */
.mm_switch .onoff {
  position: relative;
  display: block;
  height: 2rem;
  line-height: 2.2rem !important;
  width: 3.75rem !important;
  background: #fff;
  border: 1px solid var(--color_border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mm_switch .onoff::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(2rem - 1px);
  height: calc(2rem - 1px);
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color_border);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
  content: '';
  transition: all 0.3s ease;
}

.mm_switch .active .onoff {
  background: #04be02;
}

.mm_switch .active .onoff::after {
  left: 1.79rem;
}

.mm_switch label:active .onoff::after {
  transform: scale(1.15, 0.85);
}

.mm_switch .on,
.mm_switch .off {
  display: block;
  position: absolute;
  top: 49%;
  transform: translateY(-50%);
}

.mm_switch .on {
  left: 0.35rem;
}

.mm_switch .on::before {
  content: 'ON';
  font-size: 0.625rem;
  color: #fff;
}

.mm_switch .off {
  right: 0.25rem;
}

.mm_switch .off::before {
  content: 'OFF';
  font-size: 0.625rem;
  color: #999;
}

/* 选择框 */
.mm_select a {
  color: inherit;
  display: inline-block;
}

.mm_select .value {
  font-size: 0.875rem;
}

.mm_select select {
  padding: 0 1.5rem 0 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
  height: 2rem;
  background-position-x: calc(100% - 0.25rem);
}

.mm_select .selected {
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  height: 2rem;
  line-height: 2rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
  /* background:url("/img/down.png") no-repeat scroll right center transparent;background-position-x:calc(100% - .25rem);*/
}

.mm_select .mm_box {
  top: 2.05rem;
  bottom: initial;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(125, 125, 125, 0.25);
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  left: 0;
  min-width: 5rem;
}

.mm_select ul {
  padding: 0;
  list-style: none;
}

.mm_select li {
  padding: 0 0.5rem;
  line-height: 2rem;
  width: 100%;
}

.mm_select li:hover {
  background: #f9f9f9;
  color: #000000;
}

.mm_textarea .value {
  position: relative;
}

.mm_textarea .btn_expand {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  font-size: 0.75rem;
  padding: 0.25rem;
  height: auto;
  line-height: 1;
}

.mm_textarea textarea:focus ~ .btn_expand {
  display: inline-block;
  opacity: 1;
}

.mm_textarea .tox-tinymce {
  display: none;
}

.mm_textarea.show-expand .value textarea {
  display: none;
}

.mm_textarea.show-expand .tox-tinymce {
  display: block;
}

.current .selected,
.hover:hover .selected,
.focus:focus .selected {
  border-color: #38f;
}

/* 反转器 */
.mm_reverse {
  display: flex;
}

.mm_reverse .figure {
  height: 2rem;
  width: 1rem;
  position: relative;
  padding-top: 0.125rem;
}

form .title {
  line-height: 2rem;
}

.mm_input .title,
.mm_checkbox .title,
.mm_radio .title,
.mm_select .title,
.mm_number .title,
.mm_slider .title,
.mm_switch .title,
.mm_reverse .title {
  float: left;
  padding-left: 1rem;
  padding-right: 0.5rem;
  min-width: 6.5rem;
  line-height: 2rem;
}

.mm_checkbox .figure {
  position: relative;
  top: 3px;
  display: inline-block;
  overflow: hidden;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #38f;
  border-radius: 50%;
}

table .mm_reverse .figure {
  float: right;
}

table .mm_reverse .title {
  min-width: initial;
  padding-left: 0;
  float: left;
  white-space: nowrap;
}

.mm_reverse .value {
  overflow: hidden;
}

.mm_reverse .up,
.mm_reverse .down {
  margin: auto;
  margin: 0.2rem auto;
  display: block;
}

.mm_reverse .up::before {
  content: '';
  display: block;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-bottom: 0.5rem solid var(--color_border);
}

.mm_reverse .down::after {
  content: '';
  display: block;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-top: 0.5rem solid var(--color_border);
}

.mm_reverse .up.active::before {
  border-bottom-color: #38f;
}

.mm_reverse .down.active::after {
  border-top-color: #38f;
}

.reverse_arrow .up {
  float: left;
  height: 1rem;
  position: relative;
}

.reverse_arrow .up::after {
  background: var(--color_border);
  height: 0.75rem;
  position: absolute;
  top: 0.25rem;
  right: 0;
  content: '';
  display: block;
  width: 2px;
}

.reverse_arrow .up::before {
  border: 0.15rem solid;
  border-color: transparent var(--color_border) var(--color_border) transparent;
}

.reverse_arrow .up.active::after {
  background: #38f;
}

.reverse_arrow .up.active::before {
  border-color: transparent #38f #38f transparent;
}

.reverse_arrow .down {
  height: 1rem;
  position: relative;
  margin-left: 0.5rem;
}

.reverse_arrow .down::before {
  background: var(--color_border);
  height: 0.75rem;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 2px;
}

.reverse_arrow .down::after {
  position: absolute;
  bottom: 0;
  border: 0.15rem solid;
  border-color: var(--color_border) transparent transparent var(--color_border);
}

.reverse_arrow .down.active::before {
  background: #38f;
}

.reverse_arrow .down.active::after {
  border-color: #38f transparent transparent #38f;
}

.reverse_arrow .active {
  display: block;
}

/* 复选框 */
.mm_checkbox .active .figure {
  background: #38f;
}

.mm_checkbox .active .figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  content: ' ';
  display: inline-block;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

/* 输入框 */
.mm_input,
.mm_checkbox,
.mm_radio,
.mm_select,
.mm_number,
.mm_slider,
.mm_switch {
  position: relative;
}

.mm_switch .value {
  display: inline-block;
}

.mm_input .value::before,
.mm_checkbox .value:before,
.mm_radio .value:before,
.mm_number .value:before,
.mm_slider .value:before,
.mm_switch .value:before {
  content: '';
  display: block;
}

.mm_input .value:after,
.mm_checkbox .value:after,
.mm_radio .value:after,
.mm_number .value:after,
.mm_slider .value:after,
.mm_switch .value:after {
  content: '';
  display: block;
}

.mm_input .unit {
  padding-left: 0.5rem;
  padding-right: 1rem;
}

/* 导航 */
.mm_nav a {
  color: inherit;
  text-decoration: none;
}

.mm_data_count {
  line-height: 2rem;
  padding: 0.5rem 0;
}

/* 盒子样式 */
.click {
  display: inline-block;
}

.click .mm_box {
  right: initial;
  min-width: 5.25rem;
}

.hover:hover .mm_box {
  display: inline-block;
}

.focus:focus .mm_box {
  display: inline-block;
}

.active:active .mm_box {
  display: inline-block;
}

.inline .mm_input,
.inline .mm_checkbox,
.inline .mm_radio,
.inline .mm_select,
.inline .mm_number,
.inline .mm_slider,
.inline .mm_switch {
  display: inline-block;
}

.pc .mm_select {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pc .mm_input {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pc .mm_input input {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
  height: 2rem;
  min-width: 12rem;
}

.pc .mm_input .title {
  line-height: 2rem;
}

.pc .mm_radio .value {
  line-height: 2rem;
}

.pc .mm_checkbox .value {
  line-height: 2rem;
}

.pc .mm_checkbox .figure {
  margin-right: 0.5rem;
}

.mobile .mm_number [class*='mm_btn'] {
  font-size: 1.25rem;
  border-radius: 50%;
  padding: 0;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin: 0.25rem 0.5rem;
}

.mobile .mm_number input {
  border: 1px solid rgba(125, 125, 125, 0.25);
  border-radius: 0.25rem;
}

.pc .mm_number .value {
  border: 1px solid #38f;
  border-radius: 0.25rem;
}

.pc .mm_number [class*='mm_btn'] {
  border-radius: 0;
  min-width: 2rem;
}

.mobile .mm_input {
  margin-bottom: -1px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

.mobile .mm_input .title {
  height: 2rem;
  line-height: 2rem;
}

.mobile .mm_input input {
  line-height: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  flex: 1;
  border-color: transparent;
}

.mobile .mm_input .unit {
  line-height: 2rem;
  height: 2rem;
}

.mobile .mm_checkbox .figure {
  margin-right: 1rem;
}

.mobile .mm_radio label,
.mobile .mm_checkbox label {
  display: block;
  margin: -1px 0 0 0;
  padding: 0.5rem;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

.mobile .mm_radio .figure {
  float: right;
  border: none;
}

.mobile .mm_radio .active .figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  content: ' ';
  display: inline-block;
  width: 1rem;
  height: 0.5rem;
  border-left: 1px solid #38f;
  border-bottom: 1px solid #38f;
  border-radius: 0;
  background: none;
}

.mobile .mm_switch {
  margin-bottom: -1px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid rgba(125, 125, 125, 0.25);
  border-bottom: 1px solid rgba(125, 125, 125, 0.25);
  overflow: hidden;
}

.mobile .mm_switch .value {
  display: block;
}

.mobile .mm_switch .onoff {
  float: right;
  margin-right: 1rem;
}

.mobile .mm_input .title ~ .value {
  overflow: hidden;
  display: flex;
}

/* ===  导航栏  === */
.mm_bar_logo {
  overflow: hidden;
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.mm_bar_logo:after {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.mm_bar_logo:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mm_bar_logo img {
  max-height: var(--img_size_mini);
  margin: var(--margin_small);
}

.mm_bar_logo span {
  line-height: 2.25rem;
  font-size: var(--font_small);
}

/* ===  导航栏  === */
.mm_nav_fast {
  float: left;
}

.mm_nav_fast > * {
  line-height: var(--height_big);
  height: var(--height_big);
  border-radius: 0;
  padding-right: var(--padding_base);
  padding-left: var(--padding_base);
}

.mm_nav_side .mm_item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0;
}

.mm_nav_side .btn,
.mm_nav_side .box {
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
}

.mm_nav_side .mm_item.active {
  border-bottom: none;
}

.mm_nav_side .mm_item.active::before {
  display: none;
}

.mm_nav_side .mm_item::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mm_nav_side {
  color: var(--color_default_h);
}

.mm_nav_side .btn {
  overflow: hidden;
  line-height: var(--height_big);
  padding: 0 var(--padding_mini);
  color: inherit;
  font-size: var(--font_small);
  position: relative;
}

.mm_nav_side .btn:after {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  content: '';
  padding: 3px;
  display: block;
  border: solid var(--color_default_h);
  border-width: 0 1px 1px 0;
  transition: all 0.2s;
}

.mm_nav_side .btn:hover {
  color: var(--color_white);
  background: rgba(3, 4, 29, 0.1);
}

.mm_nav_side .active .btn:after {
  transform: translateY(-50%) rotate(45deg);
  border-color: var(--color_white);
}

.mm_nav_side .box {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  background: rgb(22, 25, 28);
}

.mm_nav_side .active .box {
  max-height: 80vh;
  padding: var(--padding_mini) 0;
}

.mm_nav_side .active .btn {
  color: var(--color_white);
  background: rgb(49, 131, 246);
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(102, 188, 244, 0.42) 39%,
    rgba(49, 166, 247, 0.42) 40%,
    rgba(49, 131, 246, 0.3) 100%
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(102, 188, 244, 0.42) 39%,
    rgba(49, 166, 247, 0.42) 40%,
    rgba(49, 131, 246, 0.3) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(102, 188, 244, 0.42) 39%,
    rgba(49, 166, 247, 0.42) 40%,
    rgba(49, 131, 246, 0.3) 100%
  );
}

.mm_nav_side a {
  display: block;
  line-height: var(--height_big);
  padding-left: 2.5rem;
  font-size: var(--font_small);
  position: relative;
}

.mm_nav_side .mm_icon {
  float: left;
  text-align: center;
  min-width: 1.5rem;
  margin-right: var(--margin_small);
}

.mm_nav_top {
  float: right;
}

.mm_nav_top .mm_icon {
  display: inline-block;
  line-height: 1;
  overflow: overlay;
}

.mm_nav_top .avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  overflow: hidden;
}

.mm_nav_top > button {
  display: none;
  height: 2.5rem;
  min-width: 2.5rem;
  line-height: 2.5rem;
  float: right;
  border-radius: 0;
}

.mm_nav_top .item {
  float: left;
  min-width: 2.5rem;
}

.mm_nav_top .item a {
  padding: 0 0.75rem;
  line-height: 2.5rem;
}

.mm_nav_top a {
  display: inline-block;
  font-size: var(--font_small);
  text-align: center;
}

.mm_nav_top .mask {
  background: none;
  display: none;
}

@media (max-width: 830px) {
  .mm_nav_top > button {
    display: block;
  }

  .mm_nav_top .nav_warp {
    height: 0;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    transition: height 0.3s ease-in-out;
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5rem;
  }

  .mm_nav_top .item {
    float: none;
  }

  .mm_nav_top nav {
    z-index: 32;
    background: var(--bg_black);
    clear: both;
    float: none;
    position: relative;
    padding: 0;
    transition: padding 0.3s ease-in-out;
  }

  .mm_nav_top .item > * {
    display: block;
  }

  .mm_nav_top.show .mask {
    display: block;
  }

  .mm_nav_top.show nav {
    padding: 1rem 0;
  }

  .show .nav_warp {
    height: 100vh;
  }
}

/* 加载 */
.mm_loading {
  text-align: center;
  max-width: 8rem;
}

.mm_loading .load {
  position: relative;
  margin: auto;
}

.mm_loading img,
.mm_loading i {
  display: inline-block;
  vertical-align: middle;
  animation: rotate 1s steps(12, end) infinite;
  -webkit-animation: rotate 1s steps(12, end) infinite;
}

.mm_loading .progress {
  width: 100%;
  background: #38f;
  border-radius: 0.25rem;
}

.mm_loading .progress::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1rem;
  animation: translate 1s infinite;
  -webkit-animation: translate 1s infinite;
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  /* Safari 5.1 - 6 */
  background: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  /* Firefox 3.6 - 15*/
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  /* 标准的语法 */
  border-radius: 0 0.25rem 0.25rem 0;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@-moz-keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@-ms-keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@-o-keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes translate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@-moz-keyframes translate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@-webkit-keyframes translate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@-ms-keyframes translate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

@-o-keyframes translate {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

/* 选项卡 */
.mm_tab_head {
  color: var(--color_base);
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 2rem;
  line-height: 2rem;
  border-bottom: 1px solid var(--color_border);
}

.mm_tab_head > div {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid var(--color_border);
  display: inline-block;
}

.mm_tab_head > .active {
  border-bottom: 1px solid var(--bg_grey);
  color: #38f;
  background-color: var(--bg_grey);
}

.mm_tab_head .fa-times-circle {
  color: var(--color_default_h);
}

.mm_tab_head .fa-times-circle:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* 分页器 */
.mm_pager,
[class*='mm_pager_'] {
  text-align: center;
  margin: auto;
}

.mm_pager a,
[class*='mm_pager_'] a {
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
  min-width: 2.25rem;
  white-space: nowrap;
  display: inline-block;
  height: 2rem;
  line-height: calc(2rem - 2px);
  color: #333;
  border: 1px solid rgba(125, 125, 125, 0.25);
  margin-left: -1px;
  text-align: center;
}

.mm_pager_sm a {
  height: 1.5rem;
  line-height: 1.5rem;
  min-width: 1.5rem;
  font-size: 0.85rem;
}

.mm_pager-x a {
  margin-left: 0.5rem;
  color: #333;
  border-radius: 0.25rem;
}

.mm_pager-x a:last-of-type {
  margin-right: 0;
}

.mm_pager a:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.mm_pager a:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.mm_pager-x .active {
  background: #38f;
  color: #fff;
}

.mm_pager a:hover,
.mm_pager a:active {
  z-index: 2;
}

.mm_pager .active,
[class*='mm_pager_'] .active {
  background: #38f;
  color: #fff;
  border-color: #38f;
}

.mm_pager.group > a,
[class*='mm_pager_'].group > a {
  margin-left: -1px;
}

.mm_nav_side a:hover {
  color: var(--color_white);
}

.mm_table {
  overflow-x: auto;
}

.mm_table th {
  white-space: nowrap;
}

.mm_table td {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

table .mm_btn {
  border-radius: 0.25rem;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-right: 0.5rem;
  font-size: 0.75rem;
}

.input_display {
  width: 3rem;
  text-align: center;
  border-radius: var(--radius_small);
  border: 1px solid var(--color_border);
}

.auto-width {
  display: inline-block;
  width: 100%;
  min-width: 4.5rem;
  background: none;
  border-radius: 0 !important;
  border-color: transparent !important;
  padding: 0 !important;
  font-size: inherit;
}

.auto-width:focus {
  border: 1px solid var(--color_border);
}

.th_id {
  min-width: 4rem;
}

.th_uin {
  min-width: 12rem;
}

.th_name {
  min-width: 8rem;
}

.th_type {
  min-width: 6rem;
}

.th_address {
  min-width: 15rem;
}

.th_username {
  min-width: 10rem;
}

.th_nickname {
  min-width: 10rem;
}

.th_phone {
  min-width: 9rem;
}

.th_email,
.th_time {
  min-width: 10rem;
}

.th_num {
  min-width: 8rem;
}

.th_score,
.th_state {
  min-width: 5.5rem;
}

.th_handle {
  min-width: 10rem;
}

.th_title {
  width: 15rem;
}

.th_desc {
  width: 20rem;
}

.th_selected {
  width: 3rem;
  text-align: center;
}

/* 图片上传 */
.mm_upload_img {
  text-align: center;
  position: relative;
}

.mm_upload_img .btns {
  position: absolute;
  left: calc(100% + 1rem);
  bottom: 0;
}

.mm_upload_img .btn_link {
  font-size: 0.625rem;
  padding: 0 0.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  white-space: nowrap;
  margin-top: 0.5rem;
}

.mm_upload_img .from_default {
  min-width: 75%;
}

.mm_upload_img .btn_close {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  padding: 0 0.05rem 0.1rem 0;
  width: 2rem;
  height: 2rem;
  color: rgb(105, 105, 105);
}

.mm_upload_img .mm_icon {
  border-radius: 0.25rem;
  border: 1px dashed rgba(125, 125, 125, 0.5);
}

.mm_upload_img .mm_icon img {
  display: none;
}

.upload_add .mm_icon::before,
.upload_add .mm_icon::after {
  content: '';
  display: block;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(125, 125, 125, 0.5);
}

.upload_add .mm_icon::before {
  width: 1rem;
  height: 0.125rem;
}

.upload_add .mm_icon::after {
  width: 0.125rem;
  height: 1rem;
}

.mm_nav_path {
  margin: 0 0.5rem;
}

.mm_nav_path a ~ a::before {
  content: '\\';
  color: var(--color_border);
  margin-left: 0.125rem;
  margin-right: 0.5rem;
}

.bar_chart {
  width: 100%;
  height: 100%;
}

.line_chart {
  width: 100%;
  height: 100%;
}

.pie_chart {
  width: 100%;
  height: 100%;
}

.upload-demo {
  height: 230px;
}
